<template>
    <div class="home">
        <star-background/>
        <template v-if="store.auth.user">
            <div class="main" >
                <div class="revise">
                    <div class="revise-left">
                        <div class="revise-num">
                            {{userInfo.needToReviseNum}}
                            <span>个待复习</span>
                        </div>
                    </div>
                    <div class="revise-right">
                        <div class="revise-title">Alan小升初单词学习站</div>
                        <div class="block text-center">
                            <el-carousel height="150px" type="card">
                                <el-carousel-item v-for="item in banner" :key="item">
                                    <h3 class="small justify-center" text="2xl" style="color: black">{{ item }}</h3>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    <div class="button" style="margin-top: 20px">
                        <span style="color: #0c0909" class="revise-button" @click="goRevise">开始复习</span>
                        <span style="color: #0c0909" class="run-button"  @click="logout">不学了，开润！</span>
                    </div>
                </div>
                <div>
                    <!-- delete popconfirm -->
                    <el-popconfirm
                        title="你确定要学习这组单词吗？"
                        v-model:visible="showPopconfirm"
                        @confirm="handleConfirm"
                        @cancel="handleCancel"
                    >
                    </el-popconfirm>
                </div>
                <div class="hint">新学单词：</div>
                <div class="learn" >
                            <div class="learn-list" v-for="(list,index) in store.learn.wordLists"
                                 :key="index"
                                 @click="goLearn(list.id)">
                                <div class="list-title">模块名称:{{list.listName}}</div>
                                <div class="list-hint">共有{{list.wordNum}}个单词</div>
                                <div class="list-more"></div>
                                <div class="list-hover"></div>
                            </div>
                </div>
            </div>
        </template>
        <div v-else class="main">
            <div class="header">两周搞定小升初单词</div>
            <img src="../static/icons/logo.svg" />
            <div class="start">现在开始</div>
        </div>
    </div>
</template>

<script setup>
import {get, post,getWithParm} from "@/net";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import {useStore} from "@/stores";
import {ref} from "vue";

const store = useStore()

const banner = [
    "逸一时",
    "误一世",
    "逸久逸久罢已龄",
    "24岁，是个小学生"
]

//方法定义
const logout =()=>{
    get("/api/auth/logout",(message)=>{
        ElMessage.success(message)
        store.auth.user = null
        router.push("/")
    })
}

const goRevise =()=>{
    ElMessageBox.confirm('你确定开始复习吗？一鼓作气哦', '提示', {
        confirmButtonText: 'sure！',
        cancelButtonText: 'emmm..',
        type: 'success'
    }).then(() => {
        if (store.revise.needToRevise.length<=0)
            ElMessage.warning("先去学一点，再复习")
        else {
            router.push('/revise')
        }
    }).catch(() => {
        ElMessage.warning('做好准备再来吧!')
    });
}

// 控制 popconfirm 是否显示
const showPopconfirm = ref(false)
let currentListId = 0;
const goLearn = (listId)=>{
    currentListId = listId
    get("/vocabulary/learn?listId="+listId+"&userId="+userInfo.value.user.id,(massage)=>{
        store.learn.currentSchedule = massage
        console.log('当前用户学习计划：'+massage.schedule)
        //新用户
        if (massage.schedule==null){
            showPopconfirm.value = true
        }
        else {
            ElMessage.success('开卷')
            router.push('/learn')
        }
    })
}

const handleConfirm  = ()=>{
    ElMessage.success("正在为您创建学习计划..")
    get('/vocabulary/setSchedule?userId='+userInfo.value.user.id+"&listId="+currentListId,(message)=>{
        ElMessage.success("创建成功！")
    })
}
const handleCancel = ()=>{
    ElMessage.error("不学拉倒")
}

const userInfo = ref({
    user: store.auth.user,
    needToRevise:store.revise.needToRevise,
    needToReviseNum:store.revise.needToRevise.length
})

//初始化一下
store.learn.currentSchedule = null;

</script>

<style scoped>



.el-carousel__item h3 {
    color: #00050a;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #626467;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d0d2d3;
}

.home {
    width: 100vw;
    height: 100vh;
    background: #0c0909;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.main {
    height: fit-content;
    padding: 110px 30px;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
}

.revise {
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, .24);
    border-radius: 4px;
    padding: 35px;
    box-sizing: border-box;
    display: flex;
    /*background-image: url("src/static/bg/pic2.jpg");*/
    background-size: cover;
    background-position: center;
}

.revise-left {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.revise-num {
    width: 115px;
    height: 115px;
    border-radius: 50%;
    border: 9px solid #C1CACE;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 25px;
    color: #40BC96;
    font-weight: 600;
    border: 8px solid #C1CACE;
}

.revise-num span {
    margin-top: 6px;
    font-size: 15px;
    color: #455358;
    font-weight: 700;
}

.revise-right {
    width: calc(100% - 140px);
    height: 100%;
    padding-left: 35px;
    box-sizing: border-box;
}

.revise-title {
    width: 100%;
    font-size: 36px;
    font-weight: 700;
    color: #455358;
    text-align: left;
}

.revise-hint {
    width: 100%;
    color: #455358;
    font-size: 17px;
    margin-top: 15px;
    text-align: left;
}

.revise-button {
    width: 220px;
    height: 64px;
    margin-top: 30px;
    background: #35a950;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.5s ease;
}
.run-button {
    width: 220px;
    height: 64px;
    margin-top: 10px;
    background: #de2929;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.5s ease;
}

.revise-button:hover {
    background: #F9CC28;
    color: #455358;
}

.hint {
    width: 100%;
    font-weight: 600;
    font-size: 18px;
    color: #455358;
    margin-top: 30px;
    text-align: left;
}

.learn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px;
}

.learn-list {
    width: 32%;
    border-radius: 5px;
    box-shadow: 0 0 1.5px 0 rgba(0,0,0,.24);
    background: #FFFFFF;
    padding: 20px 0 20px 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.list-hover {
    width: 100%;
    height: 5px;
    background: #fac60c;
    opacity: 0;
    transition: all 0.4s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.learn-list:hover .list-hover {
    opacity: 1;
}

.list-title {
    width: 100%;
    font-size: 21px;
    font-weight: 700;
    color: #455358;
    text-align: left;
}

.list-hint {
    width: 100%;
    color: #99A5AA;
    font-size: 14px;
    margin-top: 8px;
    text-align: left;
    font-weight: 700;
}

.list-more {
    width: 100%;
    color: #455358;
    font-size: 13px;
    margin-top: 35px;
    text-align: left;
    font-weight: 600;
}

.header {
    width: 100%;
    color: #40BC96;
    text-align: center;
    font-size: 42px;
    letter-spacing: 3px;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 80px;
}

.start {
    width: 240px;
    height: 64px;
    margin: 100px auto 0 auto;
    background: #3CCFCF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.5s ease;
    cursor: pointer;
}

.start:hover {
    background: #F9CC28;
    color: #455358;
}

.info {
    position: absolute;
    bottom: 0;
    height: 80px;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: #999999;
    line-height: 30px;
    cursor: pointer;
}

.info span {
    font-size: 14px;
}
</style>
